<template>
  <view class="memories-container">
    <!-- 顶部统计区域 -->
    <view class="stats-header">
      <view class="stats-card">
        <text class="stats-title">照片总数</text>
        <text class="stats-number">2,456</text>
      </view>
      <view class="stats-card">
        <text class="stats-title">时间跨度</text>
        <text class="stats-number">3年</text>
      </view>
      <view class="stats-card">
        <text class="stats-title">回忆故事</text>
        <text class="stats-number">24</text>
      </view>
    </view>
    
    <!-- 时间线内容 -->
    <scroll-view 
      class="timeline-scroll" 
      scroll-y
      @scrolltolower="loadMore"
      refresher-enabled
      :refresher-triggered="isRefreshing"
      @refresherrefresh="onRefresh"
    >
      <!-- 按年份分组的回忆 -->
      <view class="year-group" v-for="year in memories" :key="year.year">
        <view class="year-header">
          <text class="year-text">{{year.year}}</text>
          <text class="photo-count">{{year.totalPhotos}}张照片</text>
        </view>
        
        <!-- 月份卡片 -->
        <view class="month-card" v-for="month in year.months" :key="month.month">
          <view class="month-header">
            <text class="month-text">{{month.month}}月</text>
            <text class="day-count">{{month.days.length}}天有照片</text>
          </view>
          
          <!-- 照片网格 -->
          <view class="photos-grid">
            <view 
              class="photo-item" 
              v-for="photo in month.photos" 
              :key="photo.id"
              @click="previewPhoto(photo)"
            >
              <image :src="photo.url" mode="aspectFill"></image>
              <view class="photo-date">{{photo.date}}</view>
            </view>
          </view>
          
          <!-- 生成回忆按钮 -->
          <view class="generate-memory" @click="generateMemory(month)">
            <u-icon name="play-right-fill" size="24" color="#3a8838"></u-icon>
            <text>生成回忆</text>
          </view>
        </view>
      </view>
      
      <!-- 加载更多提示 -->
      <view class="loading-more" v-if="isLoading">
        <u-loading-icon mode="circle" size="24" color="#999"></u-loading-icon>
        <text>加载中...</text>
      </view>
      
      <!-- 到底提示 -->
      <view class="no-more" v-if="noMoreData">
        <text>- 已经到底啦 -</text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isRefreshing: false,
      isLoading: false,
      noMoreData: false,
      memories: [
        {
          year: '2024',
          totalPhotos: 156,
          months: [
            {
              month: '3',
              days: ['1', '5', '8', '15', '20'],
              photos: [
                { id: 1, url: '/static/src.png', date: '3月15日' },
                { id: 2, url: '/static/src.png', date: '3月8日' },
                { id: 3, url: '/static/src.png', date: '3月5日' },
                { id: 4, url: '/static/src.png', date: '3月1日' }
              ]
            },
            {
              month: '2',
              days: ['1', '14', '28'],
              photos: [
                { id: 5, url: '/static/src.png', date: '2月28日' },
                { id: 6, url: '/static/src.png', date: '2月14日' },
                { id: 7, url: '/static/src.png', date: '2月1日' }
              ]
            }
          ]
        },
        {
          year: '2023',
          totalPhotos: 865,
          months: [
            {
              month: '12',
              days: ['24', '25', '31'],
              photos: [
                { id: 8, url: '/static/src.png', date: '12月31日' },
                { id: 9, url: '/static/src.png', date: '12月25日' },
                { id: 10, url: '/static/src.png', date: '12月24日' }
              ]
            }
          ]
        }
      ]
    }
  },
  methods: {
    // 下拉刷新
    async onRefresh() {
      this.isRefreshing = true;
      await this.loadData();
      this.isRefreshing = false;
    },
    
    // 加载更多
    loadMore() {
      if (this.isLoading || this.noMoreData) return;
      this.isLoading = true;
      
      setTimeout(() => {
        this.isLoading = false;
        this.noMoreData = true;
      }, 1000);
    },
    
    // 预览照片
    previewPhoto(photo) {
      uni.previewImage({
        urls: [photo.url],
        current: photo.url
      });
    },
    
    // 生成回忆
    generateMemory(month) {
      // 跳转到生成回忆页面
      uni.navigateTo({
        url: `/pages/memory/create?month=${month.month}&year=${this.currentYear}`,
      });
    },
    
    // 加载数据
    async loadData() {
      await new Promise(resolve => setTimeout(resolve, 1000));
    }
  }
}
</script>

<style>
.memories-container {
  min-height: 100vh;
  background-color: #f8f8f8;
  padding-bottom: 30rpx;
}

/* 顶部统计区域 */
.stats-header {
  display: flex;
  justify-content: space-between;
  padding: 30rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
}

.stats-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx;
}

.stats-title {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.stats-number {
  font-size: 36rpx;
  color: #3a8838;
  font-weight: bold;
}

/* 时间线内容 */
.timeline-scroll {
  height: calc(100vh - 180rpx);
}

.year-group {
  margin-bottom: 30rpx;
}

.year-header {
  padding: 20rpx 30rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.year-text {
  font-size: 32rpx;
  color: #333;
  font-weight: bold;
}

.photo-count {
  font-size: 24rpx;
  color: #999;
}

/* 月份卡片样式 */
.month-card {
  background-color: #fff;
  margin: 0 20rpx 20rpx;
  border-radius: 12rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.month-header {
  padding: 20rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f5f5f5;
}

.month-text {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.day-count {
  font-size: 24rpx;
  color: #999;
}

/* 照片网格样式 */
.photos-grid {
  display: flex;
  flex-wrap: wrap;
  padding: 10rpx;
  gap: 10rpx;
}

.photo-item {
  width: calc(33.33% - 7rpx);
  position: relative;
  border-radius: 8rpx;
  overflow: hidden;
}

.photo-item image {
  width: 100%;
  height: 200rpx;
  display: block;
}

.photo-date {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8rpx;
  font-size: 20rpx;
  color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
  text-align: center;
}

/* 生成回忆按钮 */
.generate-memory {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20rpx;
  border-top: 1px solid #f5f5f5;
  color: #3a8838;
  font-size: 26rpx;
}

.generate-memory text {
  margin-left: 10rpx;
}

/* 加载更多和底部提示 */
.loading-more, .no-more {
  text-align: center;
  padding: 30rpx;
  color: #999;
  font-size: 24rpx;
}

.loading-more {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10rpx;
}
</style> 